<template>
  <div class="flex flex-col h-96">
    <div class="flex-shrink-0">
      <div class="cursor-pointer" @click="() => onChange('day')">日</div>
      <div class="cursor-pointer" @click="() => onChange('week')">周</div>
      <div class="cursor-pointer" @click="() => onChange('month')">月</div>
    </div>
    <div class="flex-1 h-0">
      <div ref="containerRef" class="h-full"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

let myChart;
export default {
  name: "OkrTreeDemoDemo01",

  data() {
    return {};
  },

  mounted() {
    myChart = echarts.init(this.$refs.containerRef);
    /** @type EChartsOption */
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        // Try 'horizontal'
        // orient: "vertical",
        orient: "horizontal",
        top: 10,
        // top: "center",
      },
      xAxis: {
        // x 轴数据
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      },
      yAxis: [
        {
          type: "value",
          name: "产量(个)",
          // 原始的y轴刻度线的最大值，就是数据值的最大值，为防止定格，将最大值在数据值的最大值基础上，再上调1.2倍
          max: function (value) {
            return parseInt(value.max * 1.2);
          },
          yAxisIndex: 0,
          axisLabel: {
            //y轴每个刻度都加单位
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "完成率(%)",
          min: 0, // 最小为0
          interval: 25, // 间隔25
          max: function (value) {
            return parseInt(value.max * 1.2);
          },
          axisLabel: {
            //y轴每个刻度都加单位
            formatter: "{value}%",
          },
        },
      ],
      series: [
        {
          // 图表数据名称(指标内)
          name: "计划内产量",
          // 多个serie如果有相同的stack值，则会堆叠在一起
          stack: "产量",
          // 图表类型
          type: "bar",
          label: {
            show: true,
          },
          // 图表数据（数据个数与x轴数据对应）
          data: [150, 20, 150, 140, 150, 120],
          itemStyle: {
            normal: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "red", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "red", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          // 图表数据名称(指标外)
          name: "计划外产量",
          stack: "产量",
          // 图表类型
          type: "bar",
          // 图表数据（数据个数与x轴数据对应）
          data: [50, 0, 0, 0, 100, 0],
          itemStyle: {
            normal: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "green", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "green", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          type: "line",
          name: "计划产量",
          data: [150, 150, 150, 150, 150, 150],
          yAxisIndex: 0, // 0表示以左侧侧Y轴为基准
          symbolSize: 0, // 圆点大小
          lineStyle: {
            color: "blue", //折线图线条颜色
          },
        },
        {
          type: "line",
          name: "完成率",
          data: [150, 10, 100, 90, 180, 70],
          yAxisIndex: 1, // 1表示以右侧Y轴为基准
          symbolSize: 10, // 圆点大小
          lineStyle: {
            color: "brown", //折线图线条颜色
          },
          label: {
            show: true,
            color: "orange",
            formatter: "完成率:{c}%", // {c}数据值
          },
        },
      ],
    });
  },

  methods: {
    onChange(flag) {
      if (flag === "day") {
        myChart.setOption({
          xAxis: {
            // x 轴数据
            data: ["4月1日", "4月2日", "4月3日", "4月4日", "4月5日", "4月6日"],
          },
        });
      } else if (flag === "week") {
      } else if (flag === "month") {
        myChart.setOption({
          xAxis: {
            // x 轴数据
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          },
        });
      }
    },
  },
};
</script>
